<template>
  <div class="indexBox">
    <el-container style="width: 100%; height: 100%">
      <el-aside
        width="115px"
        style="
          display: flex;
          flex-direction: column;
          text-align: center;
          background-color: #393f4c;
        "
      >
        <div style="margin: 1vw 0vw">
          <el-image
            style="width: 52px; height: 52px"
            :src="getImageUrl('logo.png')"
            fit="fill"
            :lazy="true"
          ></el-image>
        </div>
        <div
          v-for="(item, index) in menuArray"
          :key="item.path"
          :class="item.select ? 'select-action-layout' : 'select-layout'"
          @click="roterUrl(item)"
        >
          <el-image
            style="width: 23px; height: 23px; margin-bottom: 0.5vh"
            :src="
              item.select
                ? getImageUrl(item.selectImageUrl)
                : getImageUrl(item.imageUrl)
            "
            fit="fill"
            :lazy="true"
          ></el-image>
          <span :class="item.select ? 'select-action-name' : 'select-name'">{{
            item.name
          }}</span>
        </div>
      </el-aside>
      <el-container>
        <el-header class="header flex_space_between">
          <div class="left flex_center_center">
            <div class="shop_name flex_center_center">
              <div class="header_icon"></div>
              {{ userState.userInfo.store_name }}
            </div>
            <div class="flex_center_center">
              <div class="header_icon_shop"></div>
              {{ userState.userInfo.code_num }} 号机
            </div>
          </div>
          <div v-show="searchShow" class="center flex_center_center">
            <el-input
              suffix-icon="search"
              style="font-size: 11px"
              placeholder="请输入订单号后四位"
              class="ipt"
            ></el-input>
          </div>
          <div class="right flex_center_center">
            <el-avatar :size="30" :src="userState.userInfo.avatar" />
            <span class="user_name">{{ userState.userInfo.username }}</span>
            <span class="user_id flex_center_center"
              >{{ userState.userInfo.username_num }}
              <!-- <el-icon style="margin-left: -0.1vw" color="#EB5E12">
                <CaretBottom />
              </el-icon> -->
            </span>
            <span class="time"> {{ time }} </span>
            <div class="day">
              <p style="font-size: 10px">{{ date }}</p>
              <p style="font-size: 10px">{{ day }}</p>
            </div>
          </div>
        </el-header>
        <el-main class="main" style="background: #eef2f5">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted, watch } from "vue";
import router from "../../router/index.js";
import { useRoute } from "vue-router";

import { CaretBottom } from "@element-plus/icons-vue";
import { useUserStore } from "../../store/modules/user";

const userState = useUserStore();

const userRoute = useRoute();
const route = useRoute();
const searchShow = ref(true);

/**
 * @现在时间
 */
const time = ref("");
const date = ref("");
const day = ref("");

const updateTime = () => {
  const now = new Date();
  time.value = now.toLocaleTimeString("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
  });
  date.value = `${now.getMonth() + 1}-${now.getDate()}`;
  day.value = now.toLocaleDateString("zh-CN", { weekday: "long" });
};

let timer;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
  setActiveMenu();
});

onUnmounted(() => {
  clearInterval(timer);
});

/**
 * @收银页面隐藏搜索
 */
watchEffect(() => {
  if (userRoute.path === "/cashier") {
    searchShow.value = false;
  } else {
    searchShow.value = false;
  }
});

/**
 * @左侧菜单路由
 */
const menuArray = ref([
  {
    select: true,
    name: "收银",
    selectImageUrl: "ic_select_cashier.png",
    imageUrl: "ic_normal_cashier.png",
    path: "/cashier",
  },
  {
    select: false,
    name: "订单",
    selectImageUrl: "ic_select_order.png",
    imageUrl: "ic_normal_order.png",
    path: "/order",
  },
  {
    select: false,
    name: "交班",
    selectImageUrl: "ic_select_exchange.png",
    imageUrl: "ic_normal_exchange.png",
    path: "/returnUrl",
  },
]);

/**
 * @动态本地图片
 */
function getImageUrl(url: any) {
  const path = new URL(`../../assets/images/${url}`, import.meta.url);
  return path.href;
}

/**
 * @左侧路由操作
 */
const setActiveMenu = () => {
  const basePath = route.path.slice(0, 6);
  menuArray.value.forEach((item) => {
    if (basePath === "/order" && item.path === basePath) {
      // order 页面有多级路由嵌套，需要这么处理
      item.select = true;
    } else {
      item.select = item.path === route.path;
    }
  });
};

watch(
  () => route.path,
  (newPath) => {
    setActiveMenu();
  }
);

const roterUrl = (item: any) => {
  router.push(item.path);
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common";

.indexBox {
  width: 100%;
  height: 100%;

  .main {
    padding: 0px 10px;
  }

  .select-action-layout {
    width: 52px;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fd6013;
    margin: 0px auto;
    text-align: center;
    align-items: center;
    margin-bottom: 2vh;
    border-radius: 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 0.8vw;
    color: #fff;
  }

  .select-layout {
    width: 52px;
    height: 56px;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 0px auto;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-bottom: 2vh;
    border-radius: 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 0.8vw;
    color: #000;
  }

  .select-action-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 11px;
    color: #ffffff;
  }

  .select-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 11px;
    color: #000000;
  }

  .header {
    padding: 0 10px 0 10px;
    width: 100%;
    background: #eef2f5;
    height: 67px;
    font-weight: 400;
    font-size: 11px;
    color: #333333;

    .left {
      .header_icon {
        height: 35px;
        width: 25px;
        background: url("src/assets/images/fangzi.png") no-repeat center center;
        background-size: 100%;
      }

      .header_icon_shop {
        height: 35px;
        width: 25px;
        background: url("src/assets/images/dianpu.png") no-repeat center center;
        background-size: 100%;
      }

      .shop_name {
        margin-right: 1vw;
      }
    }

    .center {
      width: 38vw;

      .ipt {
        width: 100%;
      }
    }

    .right {
      //width:15vw;

      .user_name {
        margin-left: 0.5vw;
      }

      .user_id {
        margin-left: 0.5vw;
        color: #666666;
        font-size: 0.8vw;
      }

      .time {
        margin-left: 0.5vw;
        font-weight: bold;
        font-size: 1.2vw;
      }

      .day {
        margin-left: 0.5vw;
        display: flex;
        flex-direction: column;
        font-size: 0.5vw;
        align-items: flex-end;
      }
    }
  }
}
</style>
